<template>
  <div class="app-container">
    <div style="width:70%">
      <el-card style="height:50px;">
        <el-row style="margin-top:-13px">
          <el-button
            :style="setIconStyle(colors)"
            type="text"
            size="small"
            style="font-size:16px;"
            class="open"
            @click="allShow()"
            v-if="!pingLun"
          >项目论坛</el-button>
          <el-button
            :style="setIconStyle1(colors1)"
            type="text"
            size="small"
            style="font-size:16px;"
            class="open1"
            @click="myShow()"
            v-if="!pingLun"
          >我发布的</el-button>
          <el-button
            icon="el-icon-arrow-left"
            size="small"
            @click="returns()"
            v-if="pingLun"
            style="background: #E6E6E6;"
          >返回</el-button>
        </el-row>
      </el-card>
      <el-card style="height:788px;margin-top:10px" class="contens">
        <ul
          v-for="(item, index) in this.itemArr"
          :key="index"
          v-if="!pingLun"
          style="margin:0px 0px 5px 0px"
        >
          <Invitation
            v-if="allShows"
            :itemObj="item"
            @fatherMethod2="fatherMethod2"
            @fatherMethod1="fatherMethod1"
            :key="datekey"
          />
          <myInvitation
            v-if="myShows"
            :itemObj="item.createUserId==userId?item:null"
            @fatherMethod2="fatherMethod2"
            @fatherMethod1="fatherMethod1"
            :key="datekey"
          />
        </ul>

        <!-- @fatherMethod1="fatherMethod1" -->
        <child :pinglunList="pinglunList" v-if="pingLun" @fatherMethod="fatherMethod" />
      </el-card>
    </div>
    <div style="width:30%;margin-left:1%" v-if="!pingLun">
      <el-card>
        <div style="font-size: 14px; text-align: start; display: flex;">
          <span
            style="display: block;
                margin-top: 0px;
                margin-right: 9px;
                 width: 4px;
                 height: 18px;
                 background-color: blue;"
          ></span>
          <span style="font-weight: 800;font-size:18px">发帖</span>
        </div>
        <el-row style="margin-top:4%">
          <el-form label-width="60px" :model="formLabelAlign">
            <el-form-item label="主题:">
              <el-input v-model="formLabelAlign.forumTitle" placeholder="请输入" style="width:95%"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
              <el-input
                @input="shuru(formLabelAlign.forumContent)"
                type="textarea"
                v-model="formLabelAlign.forumContent"
                placeholder="请输入..."
                :rows="28"
                style="width:95%"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
      <el-card>
        <span style="display:flex; justify-content: center;">
          <el-button @click="closeTargets2()" style="background-color: rgba(213, 215, 220);">清空</el-button>
          <el-button type="primary" @click="submitForm2()" :disabled="disabled">提交</el-button>
        </span>
      </el-card>
    </div>
  </div>
</template>

<script>
import { websock } from "@/websock";
import { Message } from "element-ui";
import child from "./compoments/child.vue";
import { quchongAuditors } from "@/utils/utils";
import { getLunTanPage, fabuTieZi, getUserId } from "@/api2/luntan";
import Invitation from "./compoments/Invitation.vue";
import myInvitation from "./compoments/myInvitation.vue";
export default {
  components: { Invitation, child, myInvitation },
  data() {
    return {
      pingLun: false,
      show: true,
      allShows: true,
      colors: "1",
      colors1: "1",
      myShows: false,
      disabled: true,
      itemArr: [],
      tieziList: [],
      userId: "",
      datekey: new Date().getTime(),
      pinglunList: {},
      formLabelAlign: {
        forumTitle: "",
        forumContent: ""
      }
    };
  },
  created() {
    this.getUsers();
    this.getLunTanList();
  },

  computed: {
    //动态设置样式
    setIconStyle() {
      return function(index) {
        console.log(index);
        return index == 1 ? "border-bottom: 2px solid #3b95ff;" : "color: #000";
      };
    },
    setIconStyle1() {
      return function(index) {
        console.log(index);
        return index == 2 ? "border-bottom: 2px solid #3b95ff;" : "color: #000";
      };
    }
  },

  methods: {
    //
    allShow() {
      this.colors = 1;
      this.colors1 = 1;
      this.allShows = true;
      this.myShows = false;
    },
    myShow() {
      this.colors = 2;
      this.colors1 = 2;
      this.allShows = false;
      this.myShows = true;
    },
    async getUsers(e) {
      console.log(this.tiezi);
      const res = await getUserId();
      this.userId = res.data.id;
    },
    shuru(e) {
      if (e !== "") {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    //返回
    returns() {
      this.datekey = new Date().getTime();
      this.getLunTanList();
      this.pingLun = false;
    },
    //
    fatherMethod2(e) {
      this.datekey = new Date().getTime();
      console.log(e);

      this.pinglunList = e;
      this.getLunTanList();
      this.pingLun = true;
    },
    fatherMethod1(e) {
      this.datekey = new Date().getTime();
      this.getLunTanList();
    },
    fatherMethod(e) {
      this.datekey = new Date().getTime();
      this.pingLun = false;
      this.getLunTanList();
    },

    // 获取帖子
    async getLunTanList() {
      const res = await getLunTanPage();
      console.log(res);
      if (res.code == 0) {
        console.log(res.data);
        this.itemArr = res.data.reverse();
        this.datekey = new Date().getTime();
      }
      let arr = [];
      console.log(this.itemArr);
      res.data.forEach(item => {
        if (item.createUserId == this.userId) {
          arr.push(item);
        }
      });
      this.tieziList = arr;
    },
    // 发布帖子
    async submitForm2() {
      this.$confirm("确认发布吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          const xmForum = {
            // openId: this.opensid,
            forumTitle: this.formLabelAlign.forumTitle,
            forumContent: this.formLabelAlign.forumContent
          };
          fabuTieZi(xmForum).then(res => {
            if (res.code == 0) {
              this.$message.success("发布成功");
              //调用子组件中的add函数
              this.getLunTanList();
              this.disabled = true;
              // this.datekey = new Date().getTime();
              // this.getList(this.shenPi); //获取表格数据
              this.formLabelAlign = { forumTitle: "", forumContent: "" };
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      // formLabelAlign: { num: "", yijian: "", yuanyin: "" }
    },
    closeTargets2() {
      this.formLabelAlign = { forumTitle: "", forumContent: "" };
      this.disabled = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  .open:focus {
    //border-bottom: 2px solid #3b95ff;
  }
  .open:hover {
    // border-bottom: 2px solid #3b95ff;
    color: blue;
  }
  .open:active {
    // border-bottom: 2px solid #3b95ff;
  }
  .open1:focus {
    // border-bottom: 2px solid #3b95ff;
  }
  .open1:hover {
    // border-bottom: 2px solid #3b95ff;
    color: blue;
  }
  .open1:active {
    // border-bottom: 2px solid #3b95ff;
  }
}
.contens {
  overflow: auto;
  padding: 5px 0px 5px 0px;
}
.contens::-webkit-scrollbar {
  display: none;
}
</style>
